<template>
	<view>
		<cu-custom bgColor="bg-black" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">商品名称 - 规格管理</block>
			<block slot="right">
				<view @tap="modelFlag = true;editFlag = false">添加</view>
			</block>
		</cu-custom>
		<view>
			<view class="cu-bar bg-white">
				<view class="action border-title">
					<text class="text-xl text-bold text-black">商品名称 - 规格管理</text>
					<text class="bg-gradual-red" style="width:3rem"></text>
				</view>
				<view class="action">
					<!-- <text class="cuIcon-filter"></text>筛选 -->
					<!-- 共 500 件商品 -->
				</view>
			</view>
			<view class="cu-list menu sm-border">
				<view class="cu-item arrow" v-for="(item,index) in 10" :key="index" @tap="handle">
					<view class="content">
						<text class="text-black margin-right">蓝色(0.9*2.4*1.8)</text>
						<text class="text-red text-sm">￥15100</text>
						<view class="text-sm text-gray">
							<text class="padding-right-sm">2020-08-25 10:50</text>
							<text class="">所属分类</text>
						</view>
					</view>
					<view class="action">
						<!-- <view class="text-green text-sm">{{ index%2==0?"上架中":"未上架"}}</view> -->
					</view>
					<!-- <view class="move">
						<view class="bg-grey" @tap.stop="edit">编辑</view>
						<view class="bg-red" @tap.stop="del">删除</view>
					</view> -->
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modelFlag?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">{{ editFlag?"编辑":"添加"}}规格</view>
					<view class="action" @tap="modelFlag = false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="text-right">
					<form>
						<view class="cu-form-group">
							<view class="title">规格名称</view>
							<input placeholder="请输入规格名称" name="input"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">价格</view>
							<input placeholder="请输入价格" type="number" name="input"></input>
						</view>
						<view class="cu-form-group">
							<view class="title">上架展示</view>
							<switch @change="isPutOnA" :class="isPutOn?'checked':''" :checked="isPutOn?true:false"></switch>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white solid-top">
					<!-- <view class="action margin-0 flex-sub solid-left text-red" @tap="del" v-show="editFlag">
						<text class="cuIcon-delete"></text>删除</view> -->
					<view class="action margin-0 flex-sub solid-left text-black" @tap="save">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				modelFlag: false,
				editFlag: false,
				isPutOn:false
			}
		},
		methods: {
			isPutOnA(e) {
				this.isPutOn = e.detail.value
			},
			save(){
				
				var that = this;
				uni.showToast({
					title:"保存成功",
					complete:function(){
						that.modelFlag = false;
					}
				})
			},
			del(){
				var that = this;
				uni.showModal({
				    title: '您确认删除规格吗？',
				    content: '',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							that.modelFlag = false;
							uni.showToast({
								title:"删除完成"
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			handle(){
				var that = this;
				uni.showActionSheet({
					title:'分类名称',
				    itemList: ['编辑规格', '删除'],
				    success: function (e) {
						console.log(e.tapIndex);
						switch(e.tapIndex){
							case 0:
								that.modelFlag = true;
								that.editFlag = true;
								break;
							case 1:
								that.del();
								break;
							default:
								uni.showToast({
									title:"删除",
									icon:"none"
								})
								break;
						}
						
				        //console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				    },
				    fail: function (res) {
				        console.log(res.errMsg);
				    }
				});
			}
		}
	}
</script>

<style>

</style>
